<template>
    <div class="app-container">
        <div>
            <el-button @click="back">返回</el-button>
            <p style="text-align: center;">
                <span><span>{{ props.order.vipName }}</span>的订单消费记录</span>
                <span style="color: #5ea1f9;margin-left: 20px;font-size: 14px;"><span>联系电话：</span>{{props.order.vipTel }}</span>
            </p>
        </div>
        <el-table :data="orderList">
            <el-table-column label="序号" align="center">
                <template #default="scope">
                    {{ (scope.$index+1) }}
                </template>
            </el-table-column>
            <el-table-column label="所属分店" align="center" prop="shopName" >
                <template #default="scope">
                <dict-tag :options="shop" :value="scope.row.shopName" />
                </template>
            </el-table-column>
            <el-table-column label="服务类型" align="center" prop="staffProperty" >
                <template #default="scope">
                    <dict-tag
                        :options="staff_property"
                        :value="scope.row.staffProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column label="服务地址" align="center" prop="vipXiangxi" >
                <template #default="scope">
                    {{ scope.row.vipSheng + scope.row.vipShi+scope.row.vipQu+scope.row.vipXiangxi }}
                </template>
            </el-table-column>
            <el-table-column label="户型及套内面积" align="center" prop="buildType" />
            <el-table-column label="价格" align="center" prop="price" />
            <el-table-column label="客户类型" align="center" prop="vipType">
                <template #default="scope">
                <dict-tag :options="vip_type" :value="scope.row.vipType" />
                </template>
            </el-table-column>
            <el-table-column label="服务档期" align="center" prop="wishTime" >
                <template #default="scope">
                    <span>{{
                        parseTime(scope.row.wishTime, '{y}-{m}-{d}')
                    }}</span
                    ><br />
                    <span>
                        <dict-tag :options="time" :value="scope.row.time"/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="vipRemark" />
            <el-table-column label="状态" align="center" prop="statusOrde" >
                <template #default="scope">
                    <dict-tag
                        :options="status_orde"
                        :value="scope.row.statusOrde"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
    import { listOrder } from "@/api/system/vip";
    import { parseTime } from '@/utils/ruoyi';
    const { proxy } = getCurrentInstance();
    const { shop, vip_type ,staff_property,status_orde,time} = proxy.useDict("shop", "vip_type","staff_property","status_orde","time");
    import { ref, defineProps } from "vue";
    const props=defineProps({
        order: {
            type: Object,
            default: () => ({

            }),
        }    
    });
    const emits = defineEmits(['change'])
    const orderList = ref([]);
    
    function back(){
        emits('change')
    }
    function getListOrder(){
        listOrder(props.order.vipName,props.order.vipTel).then(res => {
            // console.log(res.data);
            orderList.value = res.data;
        });
    }

    getListOrder();
</script>